<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Hello!</title>
	<style type="text/css">
	body {
		background:#333;
		color:#FFF;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-variant: normal;
		margin:10px;

		text-transform:uppercase;
		width:193px;
	}
	.clear {
		clear:both;
		height:0;
		overflow:hidden;
	}
	.right {
		display:inline-block;
		float:right;
	}
	a {
		color:#87C442;
		display:block;
		margin-bottom:5px;
		text-decoration:none;
	}
	a.title {
		color:#FFF;
		display:block;
		font-weight:bold;
		margin-bottom:10px;
	}
	a.update {
		color:#FFF;
		text-decoration:none;
	}
	a:hover {
		color:#EEE;
		text-decoration:underline;
	}
	span.version {
		color:#87C442;
		font-weight:bold;
		text-transform:lowercase;
	}
	form {
		margin:11px auto 5px auto;
		opacity:.35;
		text-align:center;
	}
	form:hover {
		opacity:1;
	}
	div.separator {
		background:#999;
		height:1px;
		margin:7px 0;
	}
	div.separator.main {
		background:#FFF;
		color:#FFF;
	}
	span#update {
		display:none;
		font-weight:bold;
	}
	.nav a.active {
		color:#FFF;
		font-weight:bold;
		text-decoration:none;
	}

	select {
		width:100%;
	}
	input[type="radio"] {
		margin:5px 0 1px 0;
		vertical-align:bottom;
	}

	ul {
		list-style:none;
		margin:0;
		padding:0 0 0 10px;
	}
	span.remove {
		background:url('') left top no-repeat;
		cursor:pointer;
		display:inline-block;
		float:right;
		height:15px;
		width:15px;
	}
	span.remove:hover {
		background-position:left bottom;
	}
	</style>
</head>

<body>
<a rel="external" class="title" href="http://code.google.com/p/kickstarter-prime/?utm_source=extension&utm_campaign=kickstarter-prime&utm_medium=version-link">
	Kickstarter Prime
	<span class="version right">v<span id="version"></span></span>
</a>
<span id="update"></span>

<div class="separator main"></div>
<div class="nav">
	<a href="#options" class="right">OPTIONS</a>
	<a href="#links" class="active">LINKS</a>
</div>

<div class="separator"></div>
	<div class="section LINKS">
		<a rel="external" class="report" href="http://code.google.com/p/kickstarter-prime/issues/entry?utm_source=extension&utm_campaign=kickstarter-prime&utm_medium=bugs">Report Issues</a>
		<a rel="external" class="report" href="http://code.google.com/p/kickstarter-prime/issues/entry?template=Suggestion?utm_source=extension&utm_campaign=kickstarter-prime&utm_medium=suggestion">Make A Suggestion</a>
		<a rel="external" href="http://code.google.com/p/kickstarter-prime/wiki/KickstarterPrime?utm_source=extension&utm_campaign=kickstarter-prime&utm_medium=wiki">Wiki</a>
		<a rel="external" href="http://code.google.com/p/kickstarter-prime/wiki/Changelog?utm_source=extension&utm_campaign=kickstarter-prime&utm_medium=changelog">Changelog</a>
	</div>
	<div class="section OPTIONS" style="display:none;">
		Split Starred/Followed Projects
		<input type="radio" name="split" value="true" /> Yes
		&nbsp; &nbsp; &nbsp;
		<input type="radio" name="split" value="false" /> No

		<div class="separator"></div>

		Additional Statuses
		<ul id="statii" class="statii">
		</ul>
		<div>
			<input id="newStatus" placeholder="Add your Own!" />
			<input id="addStatus" type="button" value="+" />
		</div>
	</div>
<div class="separator"></div>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XBYZ8ZZ9F2P3E">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('a[rel="external"]').click(function(e){
		e.preventDefault();
		window.open($(this).attr('href'));
	});

	$('form').attr('target', '_blank');

	chrome.extension.sendRequest({'action': 'checkUpdate'},function(response){
		if (response)
		{
			$('#version').html(response.version).css('float','right');
			if (response.text)
			{
				$('#update').html(response.text).css('display', 'block');
			}
		}
	});

	$('.nav a').click(function(){
		$('.nav a').removeClass('active');
		$(this).addClass('active');

		var section = $(this).text();
		$('.section').css('display', 'none');
		$('.section.'+ section).css('display', 'block');
	});

	chrome.extension.sendRequest({'action': 'getOption', 'option': 'ksprime-split_projects'},function(response){
		$('input[name="split"]').each(function(){
			if ($(this).val() == ''+response)
			{
				$(this).attr('checked', 'checked');
			}
		});
	});

	$('input[name="split"]').click(function(){
		var value = $(this).val();
		var el = $(this);
		chrome.extension.sendRequest({'action': 'setOption', 'option': 'ksprime-split_projects', 'value': value});
	});

	$('.nav a[href="#options"]').click(function(){
		chrome.extension.sendRequest({'action': 'getStatii'},function(response){
			for(var i in response.statii)
			{
				$('#statii').css('line-height', '17px').append('<li><span class="remove" status="'+ i +'"></span>'+ i +'</li>');
			}
		});
	});

	$('.remove').live('click', function(){
		var status = $(this).attr('status');
		chrome.extension.sendRequest({'action': 'removeStatus', 'status': status});
		$(this).parent('li').remove();
	});

	$('input#newStatus').live('keydown', function(event){
		if (event.which == 13)
		{
			addStatus();
		}
	});
	$('#addStatus').click(function(){addStatus();});
});

function addStatus()
{
	var status = $('input#newStatus').val();
	chrome.extension.sendRequest({'action': 'addStatus', 'status': status});
	$('#statii').append('<li><span class="remove" status="'+ status +'"></span>'+ status +'</li>');
	$('input#newStatus').val('');
}
//*/
</script>
</body>
</html>